<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<link rel="stylesheet" type="text/css" media="screen" href="/slstone/css/jqgrid/jquery-ui-1.9.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/slstone/css/jqgrid/ui.jqgrid.css" />

<!-- jqgrid 皮肤更改,需要在 jquery UI 官网 下载 -->
<link rel="stylesheet" type="text/css" media="screen" href="/slstone/css/jqgrid/jquery.ui.theme.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/slstone/css/jqgrid/jquery-ui.css" />


<script src="/slstone/js/jqgrid/js/jquery-1.8.3.js" type="text/javascript"></script>
<script src="/slstone/js/jqgrid/js/jquery-ui-1.9.2.custom.js"type="text/javascript"></script>
<script src="/slstone/js/jqgrid/js//i18n/grid.locale-cn.js" type="text/javascript"></script>
<script src="/slstone/js/jqgrid/js/jquery.jqGrid.min.js"type="text/javascript"></script>



<script type="text/javascript">    
$(function(){
    $("#del").click(function(){
var su=jQuery("#list1").jqGrid('delRowData',5);
        if(su) alert("Succes. Write custom code to delete row from server");
        else alert("Allready deleted or not in list");
    });
   
    //添加空行
    $("#add").click(function(){
        var datarow = {};
        var su=jQuery("#list1").jqGrid('addRowData',99,datarow);
    });

    jQuery("#list1").jqGrid({
        datatype: "local",
        height: 250,
       colNames:['Inv No','Date', 'Name', 'Amount','Tax','Total','Notes'],
       colModel:[
           {name:'id',index:'id', width:60, sorttype:"int",editable: true},
           {name:'invdate',index:'invdate', width:90, sorttype:"date",editable: true},
           {name:'name',index:'name', width:100,edittype:"select",editable: true,editoptions:{value:"ME:m;SQ:㎡;CM:m³"}},
           {name:'amount',index:'amount', width:80, align:"right",editable: true,sorttype:"float"},
           {name:'tax',index:'tax', width:80, align:"right",sorttype:"float",editable: true},      
           {name:'total',index:'total', width:80,align:"right",sorttype:"float",editable: true},    
           {name:'note',index:'note', width:150, sortable:false,editable:true}    
       ],
       cellEdit: true,        //表示表格可编辑                                
       cellsubmit:'remote',   //表示在本地进行修改
       caption: "Manipulating Array Data"
    });

    //定义数组对象
    var mydata = [
   {id:"1",invdate:"2007-10-01",name:"FedEx",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
   {id:"2",invdate:"2007-10-02",name:"InTime",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
   {id:"3",invdate:"2007-09-01",name:"TNT",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
   {id:"4",invdate:"2007-10-04",name:"TNT",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
   {id:"5",invdate:"2007-10-05",name:"ARAMEX",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
   {id:"6",invdate:"2007-09-06",name:"ARAMEX",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
   {id:"7",invdate:"2007-10-04",name:"ARAMEX",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
   {id:"8",invdate:"2007-10-03",name:"TNT",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
   {id:"9",invdate:"2007-09-01",name:"TNT",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
   ];
    //把数据数据添加到grid
    for(var i=0;i<=mydata.length;i++)
        jQuery("#list1").jqGrid('addRowData',i+1,mydata[i]);
});
</script>  

<title>Insert title here</title>
</head>
<body>



<body>
    <input type="button" id="del" name="del" value="删除" />
    <input type="button" id="add" name="add" value="添加" />
    <table id="list1" class="scroll"></table>
    <div id="pager1" class="scroll"></div>                   
</body>  
</body>
</html>